<script setup>
import CustomAmount from '@/components/CustomAmount.vue'

const props = defineProps({
  goodsItem: {
    type: Object,
    required: true,
    default: () => {
    }
  }
})
</script>

<template>
  <view class="goods-card white-bgc flex ovh m-b-15">
    <!-- 商品图片 -->
    <view class="goods-image">
      <image :src="goodsItem.image" mode="aspectFill" class="full-image"></image>
    </view>
    <!-- 商品信息 -->
    <view class="goods-info p-20 c-3 f-col-between">
      <view>
        <!-- 商品名称 -->
        <view class="goods-name tb fs-28 m-b-15">
          <van-text-ellipsis rows="1" :content="goodsItem.name"></van-text-ellipsis>
        </view>
        <!-- 店铺名称 -->
        <view class="shop-name fs-22 p-tb-5 p-lr-10 br-40 ellipsis">{{ goodsItem.shopName }}</view>
      </view>

      <view class="m-t-10">
        <view class="m-b-15 fs-22 c-9">销量：{{ goodsItem.sales }}</view>
        <view class="flex-between">
          <CustomAmount :price="goodsItem.price" show-original-price :original-price="goodsItem.originalPrice"/>
          <view class="icon icon-shoucang" style="height: 30rpx;width: 30rpx;"></view>
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.goods-card {
  .goods-image {
    width: 240rpx;
    height: 240rpx;
  }

  .goods-info {
    width: 100%;
    max-width: 470rpx;

    .shop-name {
      width: fit-content;
      background-color: #F7F8FA;
    }
  }
}
</style>